#app {
    height: 100%;
    width: 100%;
}

/* 顶部栏 */
header {
    width: 100%;
    height: 40px;
    background-color: rgb(0, 0, 0);
    font-size: 12px;
    color: #8a8f99;
    font-weight: 400;
    line-height: 40px;

}

header .hd-context a:hover {
    color: #fff;
}

header .hd-context {
    height: 40px;
    background-color: rgb(0, 0, 0);
}

header .hd-context .hd-avatar {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

header .hd-context .hd-avatar a {
    margin-left: 20px;
    color: #fff;
}

header .hd-context {
    display: flex;
    justify-content: flex-end;
}

header .hd-context a {
    cursor: pointer;
}

header .hd-context>div {
    padding-left: 42px;
}



/* 侧边栏 */
.sidebar {
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 40px;
    color: #000000;
}

.sidebar ul {
    height: 160px;

}

.sidebar ul li {
    border-radius: 40px;
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 5px 30px -2px rgba(0, 0, 0, .1);
}

/* footer */

footer {
    width: 100%;
    background-color: #fff;


}

footer ul {

    display: flex;
    justify-content: space-around;
    padding: 30px 0 10px;
    border-bottom: 1px solid #dedede;
}

footer ul li {
    font-size: 18px;
    height: 90px;
    line-height: 90px;
    text-align: center;
}

footer ul li .iconfont {
    font-size: 35px;
    vertical-align: middle;
    margin-right: 10px;
}

footer .statement {
    height: 270px;
    background: #06060b;
    color: #60606d;
    font-size: 12px;
    line-height: 18px;

}

footer .statement .center {
    display: flex;
    justify-content: space-between;
}

footer .statement .left {
    flex: 2;
}

footer .statement .right {
    flex: 2;
}

footer .statement .logo {
    padding: 20px 0;

}

footer .statement .right h1 {
    padding: 20px 0;
    font-size: 18px;
}

footer .statement .right a {
    color: #60606d;
    padding: 0 2px;
    margin-bottom: 5px;
    margin-right: 15px;
}


/* 商品购买参数 */
.main-body {

    padding: 20px 0;

}

.main-body .top {

    display: flex;

}

.main-body .top .img-box {
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 372px;
}

.main-body .top .img-box .thumb-container {
    position: relative;
    width: 105px;
}

.main-body .top .img-box ul {
    width: 85px;
    margin: 0 10px;
    position: absolute;
}

.main-body .top .img-box ul li {
    margin-bottom: 10px;
    cursor: pointer;
    border: transparent 1px solid;

}

.main-body .top .img-box .current {
    border: 1px solid #2a97fa;
}

.main-body .top .img-box ul li {
    text-align: center;
}

.main-body .top .pro-info {
    flex: 1.5;
}

/* 商品规格选择 */
.pro-info {
    padding-left: 20px;
}

.pro-info>h1 {
    vertical-align: middle;
    line-height: 26px;
    font-size: 20px;
    color: #333;
    margin-bottom: 4px;
}

.pro-info>h2 {
    line-height: 18px;
    font-size: 12px;
    color: #999;
    width: 84%;
}

.pro-info .price-store {
    margin-top: 20px;
    margin-bottom: 26px;
    padding: 20px;
    width: 100%;
    display: flex;
    border: 1px #e0e0e0 solid;
}
.pro-info .price-store .left{
    width: 60px;
    font-size: 12px;
    font-weight: 400;
    line-height: 45px;
    vertical-align: bottom;
}
.pro-info .price-store .right .new-price{
    color: #c00000;
    line-height: 30px;
    font-size: 30px;
    vertical-align: 0;
    margin-right: 10px;
}
.pro-info .price-store .right .new-price i{
    margin-right: 3px;
    font-size: 14px;
    vertical-align: 0;
}
.pro-info .price-store .right .old-price{
    font-size: 12px;
    vertical-align: 0;
    text-decoration: line-through;
    color: #ccc;
}
.pro-info .price-store .right .store{
    display: flex;
    width: 100%;
    margin-top: 15px;
}
.pro-info .price-store .right .store .img{
    margin-right: 20px;
}
.pro-info .price-store .right .store .name{
    line-height: 14px;
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.pro-info .price-store .right .store  .slogan{
    margin-top: 4px;
    overflow: hidden;
    line-height: 12px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pro-info .price-store .right .store .button i{
  display: inline-block;
  border-radius: 3px;
  background-color: #2a97fa;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  margin-left: 10px;
  cursor: pointer;
}
.pro-info .select-sum>span:nth-child(1){
  margin-right: 20px;
  line-height: 12px;
  font-size: 12px;
  font-weight: 400;
  padding-left: 20px;
}
.pro-info .unit{
    margin-top: 20px;
    margin-right: 20px;
  line-height: 12px;
  font-size: 12px;
  font-weight: 400;
  padding-left: 20px;
}
.pro-info .unit>span:nth-child(2){
    font-size: 16px;
    margin-left: 20px;
}
.pro-info .operation{
    display: flex;
    padding-left: 20px;
    margin-top: 40px;
}
.pro-info .operation .add-car{
    min-width: 167px;
    height: 52px;
    line-height: 50px;
    font-size: 20px;
    background-color: #2a97fa;
    text-align: center;
     cursor: pointer;
    color: #fff;
    margin-right: 20px;
    transition: all .5s cubic-bezier(0,1,.5,1);
}
.pro-info .operation .add-car:hover{
    background-color: #68b5fb;
}
.pro-info .operation .service{
    text-align: center;
    cursor: pointer;
    height: 52px;
    line-height: 20px;
    padding: 5px 20px;
    border: 1px solid #2a97fa;
    transition: all .5s cubic-bezier(0,1,.5,1);
}
.pro-info .operation .service:hover{
    background-color: #2a97fa;
    color: #fff;
}

/* 商品详细信息 图片  */
.pro-details {
    width: 774px;
}

.pro-details>h1 {
    margin-top: 40px;
    height: 42px;
    padding: 16px 13px;
    background-color: #e7e7e7;

}

.chat-button{
    position: fixed;
    z-index: 10;
    bottom: 30px;
    right: 35px;
    background-color: #fff;
    padding: 15px;
    font-size: 20px;
    border-radius: 50%;
    box-shadow: 0 5px 30px -2px rgba(0, 0, 0, .1);
  
    cursor: pointer;
}
/* 聊天对话框 */
.chat-dialog{
    position: fixed;
    z-index: 99;
    top: 15%;
    right: 90px;
    width: 400px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 7px 6px 1px rgb(0 0 0 / 16%);
   
}
.chat-dialog .header{
    border-radius: 5px;
    padding: 5px 10px ;
    background-color:#0066bd;
    display: flex;
    align-items: center;
    color: #fff;

   
}
.chat-dialog .header>div{

    position: relative;
}
.chat-dialog .header .img{
    border: #fff 2px solid;
    border-radius: 32px;
    overflow: hidden;
}
.chat-dialog .header>div .online{
    position: absolute;
    height: 12px;
    width: 12px;
    background-color:#0db15f;
    border-radius: 50%;
    border: #fff 2px solid;
    right: 0;
    bottom: 0;
    z-index: 100;

}
.chat-dialog .header>div .noline{
    position: absolute;
    height: 12px;
    width: 12px;
    background-color:#f0f0f0;;
    border-radius: 50%;
    border: #fff 2px solid;
    right: 0;
    bottom: 0;
    z-index: 100;

}
.chat-dialog .header p{
    margin-left: 10px;
    font-weight: 700;
}
.chat-dialog .input {
    padding: 10px 16px 13px 15px;
    position: relative;
}
.chat-dialog .input textarea{
   width: 100%;
    font-size: 20px;
    border: none;
    background-color: #f6f8f9;
}
.chat-dialog .input>div{
    position: absolute;
    right: 20px;
    top: 45px;
    background-color: #0db15f;
    color: #fff;
    padding: 5px 7px; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
}
.chat-dialog ul {
    padding: 10px;
}
.chat-dialog ul li{
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  position: relative;
}

.chat-dialog ul li .msg-context p{
    background: #f5f8fa;
    color: #414141;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    word-break: normal;
    display: inline-block;
    max-width: 280px;
}
.chat-dialog ul li .msg-context h1{
    color: #353f45;
    font-size: 10px;
    margin-left: 4px;
    vertical-align: top;
}
.chat-dialog ul li  .time{
    position: absolute;
    font-size: 10px;
    
    top: calc(50% - 10px);
    right: 0;
}
.chat-dialog ul li>p{
    color: #fff;
    transition: all .3s ease;
    transition-delay: .35s;
}
.chat-dialog ul li:hover p{
    color: #353f45;
;
}
.chat-dialog ul li .day{
    position: absolute;
    font-size: 10px;
    top: calc(50% + 8px);
    right: 0;
}
.chat-dialog ul .me .time{
  left: 0;
}
.chat-dialog ul .me .day{
    left: 0;
  }
.chat-dialog ul .me{
    display: flex;
    justify-content: flex-end;
}